<template>
    <div class="main-content">
        <a-card>
            <div class="user-content">
                <div class="user-img">
                    <a-avatar :style="{ backgroundColor: '#3370ff' }" :size="72" :image-url="user.userAvatarUrl">
                        <IconUser />
                    </a-avatar>
                </div>
                <div class="user-info">
                    <div class="user-name">{{ user.username ? user.username : '未登录' }}</div>
                    <div>
                        <a-space>
                            <template #split>
                                <a-divider direction="vertical" />
                            </template>
                            <div style="color:#999">加入猿趣阁的第<span style="color:#000;margin:0 5px">{{
                                user.createTime ? getDaysSince(user.createTime) : Placeholder }}</span>天</div>
                        </a-space>
                    </div>
                </div>
            </div>
        </a-card>
        <a-card>
            <template #title>
                <div class="data-title">
                    <div class="main">数据概览</div>
                    <div>
                        <a-tooltip content="系统会自动更新您在猿趣阁的各项数据" background-color="#2f54eb">
                            <IconQuestionCircle />
                        </a-tooltip>
                    </div>
                </div>
            </template>
            <div class="data-grid">
                <div class="data-item">
                    <div>发布文章数</div>
                    <a-statistic :value="dataValue.articleCount" :precision="0" :value-from="0" animation
                        show-group-separator placeholder="--">
                        <template #suffix>
                            <icon-arrow-rise />
                        </template>
                    </a-statistic>
                </div>
                <div class="data-item">
                    <div>上传资源数</div>
                    <a-statistic :value="dataValue.resourceCount" :precision="0" :value-from="0" animation
                        show-group-separator placeholder="--">
                        <template #suffix>
                            <icon-arrow-rise />
                        </template>
                    </a-statistic>
                </div>
                <div class="data-item">
                    <div>发表心得数</div>
                    <a-statistic :value="dataValue.commentCount" :precision="0" :value-from="0" animation
                        show-group-separator placeholder="--">
                        <template #suffix>
                            <icon-arrow-rise />
                        </template>
                    </a-statistic>
                </div>
                <div class="data-item">
                    <div>文章点赞数</div>
                    <a-statistic :value="dataValue.articleLikeCount" :precision="0" :value-from="0" animation
                        show-group-separator placeholder="--">
                        <template #suffix>
                            <icon-arrow-rise />
                        </template>
                    </a-statistic>
                </div>
                <div class="data-item">
                    <div>资源点赞数</div>
                    <a-statistic :value="dataValue.resourceLikeCount" :precision="0" :value-from="0" animation
                        show-group-separator placeholder="--">
                        <template #suffix>
                            <icon-arrow-rise />
                        </template>
                    </a-statistic>
                </div>
                <div class="data-item">
                    <div>心得点赞数</div>
                    <a-statistic :value="dataValue.commentLikeCount" :precision="0" :value-from="0" animation
                        show-group-separator placeholder="--">
                        <template #suffix>
                            <icon-arrow-rise />
                        </template>
                    </a-statistic>
                </div>
            </div>
        </a-card>
        <!-- <div class="right-container">
            <a-card :style="{ width: '180px' }">
                <template #title>
                    个人中心
                </template>
                <div class="right-info">
                    <div class="info-item">我的积分🎗️：<span class="value">{{ user.usercoin ? user.usercoin : user.placeholder
                    }}</span></div>
                    <div class="info-item">我的经验：<span class="value">{{ user.userexp ? user.userexp : user.placeholder
                    }}</span></div>
                    <div class="info-item">我的等级
                        <a-tag color="arcoblue" :style="{ marginLeft: '8px' }" size="mini">{{ user.userlevel ? 'Lv.' +
                            user.userlevel : user.placeholder }}</a-tag>
                    </div>
                </div>
            </a-card>
        </div> -->
    </div>
</template>

<script>
import {
    IconUser,
    IconQuestionCircle,
    IconArrowRise,
} from '@arco-design/web-vue/es/icon';
import { getStatic } from '@/api/userApi'
import { reactive, ref } from 'vue';
import { userStore } from '@/store/userStore';
import { Message } from '@arco-design/web-vue';
export default {
    components: {
        IconUser,
        IconQuestionCircle,
        IconArrowRise
    },
    setup() {
        const Placeholder = '--'
        const user = userStore()
        const dataValue = ref({})
        const getDaysSince = (timestamp) => {
            const now = new Date();
            const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
            const date = new Date(timestamp);
            const diff = (now.getTime() - date.getTime()) / oneDay;
            return Math.floor(diff);
        };
        const getStaticInfo = async () => {
            const userId = user.userId ? user.userId : ''
            const res = await getStatic(userId)
            if (res.data.code === 100) {
                dataValue.value = res.data.data
            } else {
                Message.error('用户信息获取失败，请稍后再试')
            }

        }
        getStaticInfo()
        return {
            dataValue,
            getDaysSince,
            user,
            Placeholder
        }
    },
    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
.data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0 20px;
    height: 290px;
    .data-item {
        padding: 16px 20px;
        background: #f7f8fa;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

.data-title {
    display: flex;
    gap: 4px;
    font-size: 18px;

    .main {
        font-weight: 500;
    }
}

.main-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 21px 3rem 2rem 1rem;

    .user-content {
        margin: 1rem;
        display: flex;

        .user-img {
            margin-right: 20px;
        }

        .user-info {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 10px 0;

            .user-name {
                margin-right: 14px;
                font-weight: 500;
                font-size: 20px;
            }

            .info-item {
                margin-left: 5px;
                color: #999;
            }
        }
    }
}
@md: 1300px;
@media (max-width: @md) {
  .right-container {
    display: none;
  }
  .main-content {
    margin: 21px 1rem 2rem 1rem;
  }
}

.right-container {
    border-radius: 4px;
    position: fixed;
    max-width: 220px;
    top: 6rem;
    right: 1%;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 0 2rem 0 1rem;
}

.right-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 8px;
    color: #848484;

    .info-item {
        display: flex;
        align-items: center;
    }

    .value {
        color: #111111;
        margin-left: 4px;
    }
}
</style>